<template>
  <div class="shopcar">
    <van-nav-bar
      title="购物车"
      :left-text="isEdit ? '完成' : '编辑'"
      @click-left="isEdit = !isEdit"
      fixed
    />

    <div v-if="!token">
      <img src="../../assets/logo.png" alt="" />
    </div>
    <div v-else>
      <van-row v-for="item in shopcar" :key="item.id">
        <van-col span="4">
          <van-checkbox
            v-model="item.status"
            @click="changeItem"
          ></van-checkbox>
        </van-col>
        <van-col span="20">
          <van-card
            :num="item.num"
            :price="item.price"
            :desc="item.properties"
            :title="item.title"
            :thumb="item.img"
          >
            <template #footer>
              <van-stepper v-model="item.num" />
            </template>
          </van-card>
        </van-col>
      </van-row>
      <!-- 渲染购物车数据 -->
    </div>

    <div class="title center">猜你喜欢</div>
    <div class="good-wrap">
      <my-goods v-for="item in goods" :key="item.id" :item="item"></my-goods>
      <!-- 循环渲染子组件  把item父传子传到子组件里 -->
    </div>

    <van-submit-bar
      :price="$store.getters.allPrice * 100"
      :button-text="isEdit ? '选中删除' : '提交订单'"
      @submit="onSubmit"
    >
      <van-checkbox v-model="$store.state.checked" @click="checkAll"
        >全选</van-checkbox
      >
    </van-submit-bar>
    <!-- 底部提交订单栏 -->
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import { getGoodList } from "../../utils/home.js";
import myGoods from "../../components/myGoods.vue";
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      isEdit: false,
      // 是否是编辑的状态
      goods: [],
      token: localStorage.getItem("token"),
    });
    const shopcar = computed(() => {
      return store.state.shopcar;
    });
    //计算属性拿到购物车数据

    const changeItem = () => store.commit("changeItem");
    //点击上面的复选框
    const checkAll = () => store.commit("checkAll");
    //点击全选按钮
    const onSubmit = () => {
      if (data.isEdit == true) {
        //现在是编辑的状态 就是要执行选中删除
        store.commit("clear");
      } else {
        //这里是提交订单的状态
        router.push("/order");
      }
    };
    let ramdomNum = Math.ceil(Math.random() * 7);
    //生成1-7之间的随机数
    getGoodList({ page: ramdomNum, pageSize: 4 }).then((res) => {
      console.log(res);
      data.goods = res.data;
    });
    //请求商品列表 来写猜你喜欢 生成一个随机的页码就能拿到一个随机的数组 1-7
    return { ...toRefs(data), shopcar, changeItem, checkAll, onSubmit };
  },
  components: {
    myGoods,
  },
};
</script>

<style lang="scss">
.shopcar {
  padding-top: 55px;
  padding-bottom: 110px;
  .title {
    height: 48px;
    width: 100%;
    font-size: 14px;
    background: #fff;
    margin: 10px 0;
  }
}
.van-submit-bar {
  bottom: 50px !important;
}
.good-wrap {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  div {
    width: 48%;
  }
}
</style>
